<template>
  <c-dialog ref="dialog" :open-fun="openFun" title="变更巡检人员">
    <c-list ref="form" :model="formData" :rules="formRules" :column="2" label-width="120px">
      <c-list-item label="装修巡检任务号" :value="detail.patrolTaskNo" />
      <c-list-item
        type="text"
        dict-type-code="schedule"
        label="巡检问题进度"
        :value="detail.schedule"
      />
      <c-list-item label="装修任务号" :value="detail.decorateTaskNo" />
      <c-list-item type="text" label="门店建设项目号" :value="detail.constCode" />
      <c-list-item type="text" label="工程监理" :value="detail.proSupervisorName" />
      <c-list-item type="text" label="门店编码" :value="detail.shopCode" />
      <c-list-item :span="2" type="text" label="门店名称" :value="detail.shopName" />
      <c-list-item label="变更前巡检人员" :value="detail.personName" />
      <c-list-item label="变更后巡检人员" :span="2" prop="personName">
        <input-with-dialog
          v-model="person"
          :props="{label:'userName',value:'account'}"
          multiple
          :config="{
            title:'巡检人员',
            width:'600px',
            interfacePath:'/slm-admin/api/v1/user/domainMarketingUser/page',
            method:'post',
            filtersRaw: [{ 'id': 'state', 'property': 'state', 'value': 1, 'operator': '=' }],
            paramsRaw:{},
            setting:[
              {prop:'account',title:'编码'},
              {prop:'userName',title:'名称'},
              {prop:'orgName',title:'组织'},
            ]
          }"
          @change="handleChangePerson"
        />
      </c-list-item>
      <c-list-item :span="2">
        <div class="btn-container">
          <c-button @click="cancelHandle">取消</c-button>
          <c-button type="primary" @click="confirmHandle">确认</c-button>
        </div>
      </c-list-item>
    </c-list>
  </c-dialog>
</template>
<script>
import { updatePerson } from '@/api/marketService/decorateInspection'
export default {
  name: 'EditPerson',
  props: {
    selData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formData: {
        id: null,
        personCode: '',
        personName: ''
      },
      detail: {},
      person: [],
      formRules: {
        personName: [{ required: true, message: '请选择变更后巡检人员', trigger: 'change' }]
      }
    }
  },
  computed: {
    // detail() {
    //   return this.selData.length ? this.selData[0] : {}
    // }
  },
  methods: {
    handleChangePerson(data) {
      if (data.length !== 0) {
        this.$set(this.formData, 'personCode', data.map(i => i.account).join(','))
        this.$set(this.formData, 'personName', data.map(i => i.userName).join(','))
      } else {
        this.$set(this.formData, 'personCode', '')
        this.$set(this.formData, 'personName', '')
      }
    },
    openFun() {
      if (!this.singleJudge(this.selData, '变更巡检人员', true)) {
        return false
      }
      this.detail = this.selData.length ? this.selData[0] : {}
      return true
    },
    async  confirmHandle() {
      const pass = await this.$refs.form.validate()
      if (!pass) return
      const data = {
        id: this.detail.id,
        personCode: this.formData.personCode,
        personName: this.formData.personName
      }
      updatePerson(data).then(res => {
        if (res.success) {
          this.$nextTick(() => {
            this.$message.success('操作成功！')
            this.$emit('on-success')
            this.$refs.dialog.visible = false
            this.detail = {}
            this.person = []
            this.formData = { id: null,
              personCode: '',
              personName: '' }
          })
        }
      })
    },
    cancelHandle() {
      this.$refs.dialog.visible = false
      this.detail = {}
      this.person = []
      this.formData = { id: null,
        personCode: '',
        personName: '' }
    }
  }

}
</script>
<style lang="scss" scoped>

</style>
